<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

    </style>
</head>
<body>
    <h1></h1>
    <hr>
     <form name="addform" action="1.php" method="post" onsubmit="return checkForm()">
        <table>
            <tr>
                <td>邮箱: </td>
                <td><input type="text" name="email"></td>
                <td><input type="text" name="Info1" value="&nbsp;邮箱格式有误!!" class="Info1" style="display:none;border:white;"></td>
            </tr>
            <tr>
                <td>用户名: </td>
                <td><input type="text" name="user"></td>
                <td><input type="text" name="Info2" value="&nbsp;用户名格式不对!!" class="Info2" style="display:none;border:white;"></td>
            </tr>
            <tr>
                <td>密码: </td>
                <td><input type="password" name="pass"></td>
                <td><input type="text" name="Info3" value="&nbsp;密码长度不合法!" class="Info3" style="display:none;border:white;"></td>
            </tr>
            <tr>
                <td>确认密码: </td>
                <td><input type="password" name="repass"></td>
                <td><input type="text" name="Info4" value="&nbsp;两次密码不一致!" class="Info4" style="display:none;border:white;"></td>
            </tr>
            <tr>
                <td></td>
                <td><button type="submit">注册</button></td>
            </tr>
        </table>
    </form>

    <script>

    function checkForm(){
        // 获取邮箱
        var email = document.addform.email.value;
        // console.log(email);
        // 邮箱验证
        // se_ek222er-huang.kk@qq.vip.com
        if (email.match(/^[\w\.-]+@\w+(\.\w+){1,3}$/) === null) {
            var Info1 = document.addform.Info1.style.display = "block";
           
            return false;
        }

        // 数字字母下划线6-18位
        var user = document.addform.user.value;
        if (! /^\w{6,18}$/.test(user)) {
            var Info2 = document.addform.Info2.style.display = "block";
            
            return false;
        }

        // 限制密码长度
        var pass = document.addform.pass.value;
        if (pass.length < 6 || pass.length > 18) {
            var Info3 = document.addform.Info3.style.display = "block";
           
            return false;
        }

        var repass = document.addform.repass.value;
        if (pass !== repass) {
            var Info4 = document.addform.Info4.style.display = "block";
           
            return false;
        }

        return true;
    }
    </script>   
    

</body>
</html>